<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <style>
        .errors{
            color: red;
            font-weight: 700;
        }
        span{
            color: red;
            font-weight: 700;
        }
    </style>
    <script>
        function  creatXMLHttpRequest() {
            var XMLHttp
            if(window.XMLHttpRequest){
                XMLHttp = new XMLHttpRequest();
            }
            else{
                XMLHttp = new ActiveXObject("Microsoft.XMLHttp")
            }
        }
        $(document).ready(function () {
            console.log(creatXMLHttpRequest())
        })
    </script>

</head>
<body>
    <h2>用户注册</h2>
    <form action="<c:url value='/UserServlet'/>" method="post" onsubmit="return check()">
        <input hidden="hidden" value="regesit" name="method" >
        用 户 名： <input type="text"  id="username" onfocus="on()" onblur="checkUserName()" />
                    <span id="checkuser" ></span><br>
        密   码：<input type="password"  id="password" onfocus="on1()"   onblur="checkPassword()"/>
                    <span id="checkpassword"></span><br>
        确认密码：<input type="password" style="width: 200px;height: 20px;" id="secondpassword" onfocus="on2()"   onblur="checksecondepassword()"/>
                    <span id="checksecondpassword"></span><br>
        邮   箱：<input type="email" style="width: 200px;height: 20px;" id="email" onfocus="on3()"   onblur="checkemail()"/>
                    <span id="checkemail"></span><br>
        <span class="errors">${errors}</span><br>
        <input type="submit" value="提交" id="button1" >
    </form>

    <script>
        //ajax将数据发送到服务器
        function check() {
            var req =creatXMLHttpRequest();
            //校验成功
            if($("#checkpassword").text()=="√" && $("#checkuser").text()=="√"&& $("#checksecondpassword").text()=="√"&&$("#checkemail").text()=="√"){
                return true;
            }
         return false;
        }
        function checkUserName(){
            //用户名校验，6到16个字符（字母和数字）
            var str=document.getElementById("username").value;
            if(str==""){
                document.getElementById("checkuser").style.color="red";
                document.getElementById("checkuser").innerHTML="登录名不能为空";
                return;
            }else{
                document.getElementById("checkuser").style.color="green";
                document.getElementById("checkuser").innerHTML="√";
            }
        }
        function checkPassword(){
            //6到16数字、字母、下划线组成，首字母为字母
            var regu="^[0-9a-zA-Z_]{5,15}$";
            var re=new RegExp(regu);
            var str=document.getElementById("password").value;
            var checkpassword=document.getElementById("checkpassword");
            if(str==""){
                checkpassword.style.color="red";
                checkpassword.innerHTML="密码不能为空";
                return ;
            }
            if(!re.test(str)){
                checkpassword.style.color="red";
                checkpassword.innerHTML="请输入6到16数字、字母、下划线";
            }else{
                checkpassword.style.color="green";
                checkpassword.innerHTML="√";
            }

        }
        function checksecondepassword(){
            var password=document.getElementById("password").value;
            var secondpassword=document.getElementById("secondpassword").value;
            var checkpassword=document.getElementById("checksecondpassword");
            if(secondpassword==""){
                checkpassword.style.color="red";
                checkpassword.innerHTML="密码不能为空";
                return;
            }
            if(password!=secondpassword){
                checkpassword.style.color="red";
                checkpassword.innerHTML="前后密码输入不正确！";

            }else{
                checkpassword.style.color="green";
                checkpassword.innerHTML="√";
            }

        }
        function checkemail(){

            var regu="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$";
            var re=new RegExp(regu);
            var str=document.getElementById("email").value;
            var checkemail=document.getElementById("checkemail");

            if(str==""){
                checkemail.style.color="red";
                checkemail.innerHTML="邮箱不能为空！";
                return;
            }
            if(!re.test(str)){
                checkemail.style.color="red";
                checkemail.innerHTML="请输入正确的邮箱格式！";

            }else{
                checkemail.style.color="green";
                checkemail.innerHTML="√";
            }
        }
        function on(){
            document.getElementById("checkuser").innerHTML="";
        }
        function on1(){
            document.getElementById("checkpassword").innerHTML="";
        }
        function on2(){
            document.getElementById("checksecondpassword").innerHTML="";
        }
        function on3(){
            document.getElementById("checkemail").innerHTML="";
        }

    </script>

</body>
</html>